html, body {
    margin: 0;
    padding: 0;
    font-family: Arial, Helvetica, sans-serif;
    width: 100%;
    height: 100%;
    font-size: 13px;
    text-align: center;
}

.header {
    grid-area: header;
    background-color: white;
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns: 15% 60% 25%;
    grid-template-rows: 92% 8%;
    grid-template-areas: "left center right" "blank border border";
}

.header-left {
    grid-area: left;
    display: inline-block;
    align-items: center;
}

.header-left a, img {
    max-width: 100%;
    max-height: 100%;
}

.header-center {
    grid-area: center;
    font-size: 26px;
    background-color: rgb(151, 224, 247);
    color: black;
    font-family: Arial;
    font-weight: bold;
}

.header-center p {
    letter-spacing: 1px;
    vertical-align: middle;
}

.header-right {
    grid-area: right;
    background-color: rgb(151, 224, 247);
}

a {
    text-decoration: none;
    color: white;
}

#welcome {
    grid-area: welcome;
}

#change_password {
    background-color: rgb(45, 126, 233);
    padding: 5px 15px;
    color: white;
    border: none;
    cursor: pointer;
    width: 200px;
}

#logout {
    background-color: rgb(233, 73, 45);
    padding: 5px 15px;
    color: white;
    border: none;
    cursor: pointer;
    width: 100px;
}

.borderline {
    grid-area: border;
    background-color: black;
}

.pagination li:hover {
    cursor: pointer;
}

.sidenav {
    padding-top: 20px;
    grid-area: sidebar;
    text-align: center;
    font-size: 15px;
    background-color: rgb(47, 48, 131);
    overflow-x: hidden;
    height: 100%;
    min-width: 15%;
}

.sidenav a {
    padding: 20px;
    font-size: 20px;
    color: #ffffff;
    display: block;
}

.sidenav a:hover {
    background-color: #ddd;
    color: black;
    font-weight: bold;
}

label {
    font-weight: bold;
    font-size: 15px;
}

.content {
    grid-area: content;
    padding: 10px 30px;
    text-align: left;
}

#guide {
    font-size: 14px;
}

.wrapper {
    display: grid;
    grid-template-columns: 9% 91%;
    grid-template-rows: 13% 87%;
    grid-template-areas: "header header header header" "sidebar content content content";
    height: 100%;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
    width: 100%;
}

table th, td {
    border: none;
    padding: 5px 5px;
    text-align: center;
}

table th {
    background-color: #000000;
    color: white;
    font-size: 15px;
    font-weight: bold;
}

table td {
    font-size: 13px;
    word-break: break-all;
}

#v_table th, #v_table td {
    padding: 5px 50px;
}

#r_ins_p_table th {
    font-size: 14px;
}

.btn {
    width: 70px;
}

th.name {
    width: 200px;
}

th.p_licence {
    width: 210px;
}

.address {
    width: 700px;
}

.inc_ID_th {
    width: 50px;
}

table tr:nth-child(even) {
    background-color: #ebe8e8
}

h1 {
    font-size: 23px;
}

input, button, select, .input_p, .radio_btn {
    font-size: 14px;
}

button, input[type="submit"] {
    background-color: rgb(45, 126, 233);
    padding: 3px 10px;
    border: none;
    color: white;
}

a.cancel_btn {
    background-color: #000000;
    display: inline-block;
    height: 20px;
    padding: 5px 10px 0px;
}

.search_box input[type="text"], .search_box button, .search_box select {
    float: left;
}

select {
    padding: 1.2px 0 1.9px;
    border: solid 2px;
    border-color: rgb(45, 126, 233);
    border-right: none;
    width: 150px;
}

select.offence_type {
    border: solid 2px;
    border-color: rgb(45, 126, 233);
}

select.r_ins_search {
    padding-bottom: 2px;
}

input[type="text"], input[type="date"], input[type="number"], input[type="password"], textarea {
    padding-bottom: 3px;
    border: solid 2px;
    border-color: rgb(45, 126, 233);
}

.offence_type {
    width: 250px;
}

#login_form {
    display: inline-block;
    align-items: center;
}

#login_form input[type="text"] {
    width: 240px;
    margin: 10px 0;
}

#login_form input[type="password"] {
    width: 240px;
    margin-bottom: 10px;
}

.demo-accounts {
    margin-top: 40px;
}

#ch_password_new, #ch_password_conf {
    width: 350px;
}

#login {
    background-color: #4CAF50;
    padding: 5px 0px;
    color: white;
    border: none;
    cursor: pointer;
    width: 100px;
}

.container {
    padding-top: 10px;
    clear: both;
}

#v_ins {
    display: grid;
    grid-template-columns: 1fr 1fr 2fr;
    grid-template-rows: min-content 4fr 1fr;
    grid-template-areas: "v_title v_title v_title" "v_input v_owner v_result" "v_submit v_submit v_submit";
    height: 100%;
}

#v_ins #v_title {
    grid-area: v_title;
    padding-bottom: 10px;
    border-bottom: solid 1px;
}

#v_ins #v_basic_info {
    grid-area: v_input;
    padding-right: 30px;
    border-right: dotted 1px;
}

#v_ins #v_owner_info {
    grid-area: v_owner;
    padding-left: 30px;
    border-right: dotted 1px;
}

#v_ins .third {
    padding-left: 30px;
    grid-area: v_result;
}

#v_ins #v_submit {
    border-top: solid 1px;
    padding-top: 20px;
    grid-area: v_submit;
}

#f_ins {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    grid-template-rows: 1fr 4fr;
    grid-template-areas: "f_search f_input" "f_result f_input";
    height: 100%;
}

#f_ins .search_box {
    grid-area: f_search;
    padding-right: 30px;
    border-right: solid 1px;
}

#f_ins .input_form {
    grid-area: f_input;
    padding-left: 30px;
}

#f_ins .search_result {
    grid-area: f_result;
    padding-top: 30px;
    padding-right: 30px;
    border-right: solid 1px;
}

#r_ins {
    display: grid;
    grid-template-columns: 0.55fr 0.5fr 0.5fr 0.6fr 1fr;
    grid-template-rows: min-content min-content min-content min-content 5fr 1fr;
    grid-template-areas: "r_title r_title r_title r_title r_title" "r_input_1 r_input_2 r_input_3 r_input_3 r_input_4" "r_person_1 r_person_2 r_person_2 r_vehicle_1 r_vehicle_2" "r_person_3 r_person_3 r_person_3 r_vehicle_3 r_vehicle_3" "r_p_result r_p_result r_p_result r_v_result r_v_result" "r_submit r_submit r_submit r_submit r_submit";
    height: 100%;
}

#r_ins #r_title {
    grid-area: r_title;
    padding-bottom: 10px;
    border-bottom: solid 1px;
    margin: 0;
}

#r_ins #inc_basic {
    padding-top: 13px;
    grid-area: r_input_1;
    border-bottom: solid 1px;
}

#r_ins #inc_date {
    padding-top: 5px;
    grid-area: r_input_2;
    padding-left: 10px;
    border-bottom: solid 1px;
}

#r_ins #inc_des {
    padding-top: 5px;
    grid-area: r_input_3;
    padding-left: 10px;
    border-bottom: solid 1px;
}

#r_ins #inc_type {
    padding-top: 5px;
    grid-area: r_input_4;
    padding-left: 10px;
    border-bottom: solid 1px;
}

#r_ins .person_info {
    grid-area: r_person_1;
}

#r_ins .p_licence_box {
    grid-area: r_person_2;
    border-right: solid 1px;
}

#p_box_lbl, #v_box_lbl {
    padding-top: 20px;
    float: left;
}

.p_box_input, .v_box_input {
    padding-top: 17px;
}

#r_ins .p_radio_btns {
    grid-area: r_person_3;
    padding-top: 10px;
    border-right: solid 1px;
    padding-bottom: 10px;
    border-bottom: dotted 1px;
}

#r_ins .r_p_result {
    grid-area: r_p_result;
    border-right: solid 1px;
    padding-right: 10px;
}

#r_ins .vehicle_info {
    padding-left: 10px;
    grid-area: r_vehicle_1;
    padding-left: 20px;
}

#r_ins .v_radio_btns {
    grid-area: r_vehicle_3;
    padding-top: 10px;
    padding-left: 20px;
    padding-bottom: 10px;
    border-bottom: dotted 1px;
}

#r_ins .v_licence_box {
    grid-area: r_vehicle_2;
}

#r_ins .r_v_result {
    padding-left: 20px;
    grid-area: r_v_result;
}

#r_ins #r_submit {
    border-top: solid 1px;
    padding-top: 10px;
    grid-area: r_submit;
    margin-top : 0;
}

input.p_licence, input.p_name {
    width: 375px;
}

input.v_type, input.v_colour, input.v_licence {
    width: 320px;
}

::placeholder {
    font-size: 13px;
    font-family: arial;
}

.msg {
    color: red;
}

input.exp_licence {
    width: 250px;
}

#inc_basic_h2 {
    margin: 5px 0;
}

input[type=submit] {
    background-color: rgb(45, 126, 233);
    padding: 4px 10px;
    color: white;
}

.search_btn {
    background-color: rgb(45, 126, 233);
    padding: 4px 10px;
    color: white;
}

.search_btn.r_ins_btn {
    padding: 5px 10px 6.5px;
}

.new_btn {
    background-color: rgb(233, 73, 45);
    padding: 4px 10px;
    color: white;
}

.f_input {
    width: 300px;
}

.u_insert {
    width: 300px;
}

.description#Incident_report {
    width: 400px;
}

#f_select, #v_insert_slt {
    padding-bottom: 2px;placeholder="Please input your password again to confirm" maxlength="10" 
    border-right: none;
}

.o_ins_inp {
    width: 350px;
}

.pagination {
    display: inline-block;
    padding-top: 20px;
}

.pagination a {
    font-weight: bold;
    font-size: 18px;
    color: black;
    float: left;
    padding: 8px 16px;
    text-decoration: none;
    border: 1px solid black;
}

.pagination button.active {
    background-color: rgb(233, 73, 45);
}

.pagination a:hover:not(.active) {
    background-color: skyblue;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}